<template>
    <div class="HomeWork_div">
        <div class="components_title">
            <TitleTop>
            </TitleTop>

            <TitleMenu>
                <div slot="titleMenu_ico" @click="$router.go(-1)" clickMusic="true">
                    <div class="title_left_ico">
                        <a-icon type="left" class="Group_ico" theme="outlined" />
                    </div>
                    <div class="title_left_text">返回</div>
                </div>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <span>资料上报</span>
                </div>
                <div slot="titleMenu_add">
                    <a-icon type="sync" style="font-size: 7vw;" theme="outlined" :class="[rotate?'go':'aa']"  @click="refresh" clickMusic="true" />
                </div>
            </TitleMenu>
        </div>
        <div id="InfoReport_content" class="content_104class" v-loading="loading" style="overflow: scroll">
           <a-row id="InfoReport_item_row1" >
               <a-col :span="24" id="InfoReport_item_col1">
                  <a-icon type="sound" style="font-size: 4.5vw"></a-icon> 如果当前公里标不正确，请点击右上角刷新
               </a-col>
           </a-row>

            <a-row id="InfoReport_longitude_row" class="InfoReport_row">
                <a-col :span="8" id="InfoReport_longitude_col1" class="InfoReport_col1">
                   经度
                </a-col>
                <a-col :span="16" id="InfoReport_longitude_col2" class="InfoReport_col2">
                    E{{longitude}}
                </a-col>
            </a-row>
            <a-row id="InfoReport_latitude_row" class="InfoReport_row">
                <a-col :span="8" id="InfoReport_latitude_col1" class="InfoReport_col1">
                    纬度
                </a-col>
                <a-col :span="16" id="InfoReport_latitude_col2" class="InfoReport_col2">
                    N {{latitude}}
                </a-col>
            </a-row>
            <!--KMS（Kilometer scale）公里标-->
            <div id="InfoReport_KMS_row" class="InfoReport_row">
                <div id="InfoReport_KMS_col1" class="InfoReport_col1" style="float: left;width: 22vw;text-align: right;">
                    公里标
                </div>
                <div id="InfoReport_KMS_col2" class="InfoReport_col2" >
                    &nbsp;{{note}}
                </div>
            </div>
            <!--<a-row id="InfoReport_KMS_row" class="InfoReport_row">
                <a-col :span="7" id="InfoReport_KMS_col1" class="InfoReport_col1">
                    公里标
                </a-col>
                <a-col :span="8" id="InfoReport_KMS_col2" class="InfoReport_col2">
                    </a-col>
            </a-row>-->
            <a-row id="InfoReport_workmode_row" class="InfoReport_row">
                <a-col :span="8" id="InfoReport_workmode_col1"  class="InfoReport_col1">
                    工作模式
                </a-col>
                <a-col :span="16" id="InfoReport_workmode_col2" class="InfoReport_col2">
                    {{workModeName}}
                </a-col>
            </a-row>

            <a-row class="InfoReport_row">
                <a-col :span="8" class="InfoReport_col1">
                    任务号
                </a-col>
                <a-col :span="16" class="InfoReport_col2">
                    <span v-if="this.$store.state.planNo!==''">{{this.$store.state.planNo}}</span>
                    <span v-else>未设置</span>
                </a-col>
            </a-row>

            <a-row id="InfoReport_report_btn_row" class="InfoReport_report_btn_row">
                <a-col :span="8" class="report_btn_col">
                    <el-button type="info" @click="infoTakeImage" class="InfoReport_report_btn" id="InfoReport_report_image" >
                        照片上报
                    </el-button>
                </a-col>
                <a-col :span="8" class="report_btn_col">
                    <el-button type="info"  @click="infoTakeVideo" class="InfoReport_report_btn" id="InfoReport_report_video" >
                        视频上报
                    </el-button>
                </a-col>
                <a-col :span="8" class="report_btn_col">
                    <el-button type="info"  @click="infoTakeSound" class="InfoReport_report_btn" id="InfoReport_report_sound" >
                        录音上报
                    </el-button>
                </a-col>

            </a-row>

        </div>
        <FooterChaanel></FooterChaanel>
    </div>
</template>
<style>
    #InfoReport_KMS_col2{
        float: left;
        width: 78vw;
        height: 14vw;
        font-size: 4.5vw;
        color: black;
        text-align: left;
        word-break: break-all;
        word-wrap: break-word;
    }
    #InfoReport_content{
        width: 100vw;
        height: calc(100vh - 66vw);
        generic-family: PingFangSC-Regular;
    }
    #InfoReport_item_col1{
        width: 100vw;
        font-size: 4.5vw;
        height: 11.25vw;
        line-height: 11.25vw;
        text-align: center;
        color: #F86E21;
    }
   .InfoReport_row{
        width: 100vw;
        height: 14vw;
        line-height: 14vw;
        background: #FFFFFF;
    }
    .InfoReport_col1{
        height: 14vw;
        line-height: 14vw;
        font-size: 5.5vw;
        color: black;
        text-align: center;
    }
    .InfoReport_col2{
        height: 14vw;
        line-height: 14vw;
        font-size: 5vw;
        color: black;
        text-align: left;

    }
    #InfoReport_report_btn_row{
        width: 100vw;
        height: 14.68vw;
        height: 14.68vw;
        margin-top: 5.312vw;
        font-size: 6vw;

    }
    .InfoReport_report_btn{
        text-align: center;
         width: 29vw;
         height: 14.68vw;
        padding: 0 2vw 0 2vw;
         border-radius: 2vw;
        font-size: 5.5vw;
        font-family: PingFangSC-Regular;
         background-image: linear-gradient(-180deg, #8F8F8F 0%, #5D5D5D 100%);
     }

</style>
<script>
    import TitleTop from './../components/TitleTop'
    import TitleMenu from  './../components/TitleMenu'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import FooterChaanel from "../components/FooterChaanel";
    import GPS from './../../public/publicJs/coordinateTools'
    export default {
        name: "FloodPatrol",
        components:{FooterChaanel, ACol, ARow, TitleTop,TitleMenu},
        inject:['reload'],
        data(){
            return {
                msg: 'hello vue',
                kmScale: "获取中",
                workModeName: '',
                rotate: false,
                loading: false,
                kilometer:'',
                meter:'',
                note:'',//公里标接口coordinates返回的note鹰厦线单线 K399+700
                timerKm:null
            }
        },
        created(){

        },
        mounted(){
            //let temp0 = GPS.gcj02towgs84(115.918719,22.65514);  //我的手机gcj02座标
            //let temp = GPS.gcj02towgs84(115.918719,28.65514); //婷姐的gcj02坐标
            /*let temp1 = GPS.wgs84togcj02(115.87541,29.606975);  //黄工的gps wgs84坐标*/
            //console.log(GPS.gcj02towgs84(115.87541,28.65514));
            //this.changeLa();//测试模拟改变经纬度
            setTimeout(()=> {
                this.getWorkModeName();
            }, 1);
            setTimeout(()=> {
                this.getKmScale2();
            }, 1);

        },
        computed: {
            longitude(){
                return this.$store.state.longitude
            },
            latitude(){
                return this.$store.state.latitude
            },
            changePosition() {
                const { longitude, latitude } = this;
                return {
                    longitude,
                    latitude
                }
            }
        },
        watch: {
            changePosition: {
                handler: function(newval , oldval) {
                    this.getKmScale(newval);
                },
                deep: true
            },
        },
        methods: {
            changeLa(){
                //115.918719,28.65514
                this.$store.commit("updateLongitude","115.918719");
                this.$store.commit("updateLatitude","28.65514");
                console.log(this.$store.state.longitude,this.$store.state.latitude);
            },
            refresh() {
                let me = this;
                this.rotate = !this.rotate;
                me.loading = true;//打开遮罩,由于后面是重新载入页面自动变为false,无须手动关闭遮罩
                setTimeout(function () {
                    me.reload();
                }, 1000);
                me.getLocaltion();
            },
            getWorkModeName() {
                let workModeId = localStorage.getItem("workModeId");
                this.$api.getWorkMode(workModeId).then((resp) => {
                    if (resp.data.status === 200) {
                        let data = resp.data.result.data;
                        let myData = data.filter((item) => item.id === parseInt(workModeId));
                        this.workModeName = myData[0].name;
                    }
                }).catch((error) => {
                    console.log(error);
                });
            },
            getKmScale(newVal) {
                console.log("newVal",newVal);
                if(typeof newVal.longitude!=="undefined"){
                    let Longitude = parseFloat(newVal.longitude);/*"117.397606"*/
                    let Latitude =  parseFloat(newVal.latitude);/*"26.041842"*/
                    let temp = GPS.gcj02towgs84(Longitude,Latitude); //婷姐的gcj02坐标
                    console.log(temp);
                    this.$api.getKmScale(temp[0],temp[1],true).then((resp) => {
                        if (resp.data.status === 200) {
                            let result = resp.data.result.data;
                            this.kilometer = result.kilometer;
                            this.meter = result.meter;
                            /*this.kmScale = "K"+this.kilometer+"+"+this.meter;*///K399+300
                            this.note = result.note;
                        }
                    }).catch((error) => {
                        console.log("getKmScale error:",error);
                        this.note ="未在公里标范围"
                    });
                }

                /*let url = "http://223.82.245.209/km/m/0502db2a91a4276871733f0f608fb69a/acffe22c7e9972385b44198c4570222e";
                let config = {
                    "headers":{
                        'Content-Type' : 'application/json;charset=UTF-8',
                        'Access-Control-Allow-Credentials':true,
                        'Access-Control-Allow-Origin': '*',
                        'Access-Control-Allow-Headers':'*',
                        "Access-Control-Allow-Methods":"*",
                        "ss":"ssss"
                    }
                };*/

            },
            getKmScale2() {
                    let Longitude = parseFloat(localStorage.getItem("longitude"));/*"117.397606"*/
                    let Latitude =  parseFloat(localStorage.getItem("latitude"));/*"26.041842"*/
                    let temp = GPS.gcj02towgs84(Longitude,Latitude); //婷姐的gcj02坐标
                    console.log(temp);
                    this.$api.getKmScale(temp[0],temp[1],true).then((resp) => {
                        if (resp.data.status === 200) {
                            let result = resp.data.result.data;
                            this.kilometer = result.kilometer;
                            this.meter = result.meter;
                            /*this.kmScale = "K"+this.kilometer+"+"+this.meter;*///K399+300
                            this.note = result.note;
                        }
                    }).catch((error) => {
                        console.log("getKmScale error:",error);
                        this.note ="未在公里标范围"
                    });

            },
            infoTakeImage() {
                this.clickButton();
                this.$store.commit('hideLoading');
                this.$router.push({name: 'reportImage'});

            },
            infoTakeVideo() {
                this.clickButton();
                this.$store.commit('hideLoading');
                this.$router.push({name: 'reportVideo'});

            },
            infoTakeSound() {
                this.clickButton();
                this.$store.commit('hideLoading');
                this.$router.push({name: 'reportSound'});

            },
            getLocaltion() {
                let me = this;
                if (typeof (baidumap_location) !== "undefined") {
                    baidumap_location.getCurrentPosition(result => {
                        console.log("资料上报刷新经纬度:");
                        me.$store.commit("updateLongitude", result.longitude);
                        me.$store.commit("updateLatitude", result.latitude);
                    }, error => {
                        console.log(error);
                        me.$store.commit('hideLoading');
                        //CoorType: "gcj02", OpenAutoNotifyMode: true, ScanSpan: 5000, LocationNotify: true
                    }, {CoorType: "gcj02", OpenAutoNotifyMode: false, ScanSpan: 0, LocationNotify: true});
                }
            }

        },

    }
</script>

